<template>
  <div class="pageBG">

    
    <div class="hideBg" @click="closeKeybord">
      <img src="../../../static/login/hideBg.png" alt>
    </div>

      <!-- <div class="navgation">
        <div class="backDiv" @click="backClick">
          <img src="../../../static/images/back.png" alt="">
        </div>
        <span class="lb"></span>
        
      </div> -->

    <div class="bg" >
      <div>
        <div class="phoneBg">
          <img src="../../../static/images/che.png" alt>
          <input type="text" v-model="licensePlate" placeholder="请输入车牌号">
          <div class="license" @click="licensePlateClick"></div>
          <!-- <span></span> -->
        </div>
        <div class="phoneBg">
          <img src="../../../static/images/phone.png" alt>
          <input
            @focus="inputStartEdit"
            type="number"
            placeholder="请输入手机号"
            maxlength="11"
            v-model="phoneNum"
          >
        </div>

        <div class="phoneBg">
          <div class="phone flex-box">
            <div class="cell-2">
              <img src="../../../static/images/psd.png" alt>
            </div>
            <div class="cell-6">
              <input
                @focus="inputStartEdit"
                style="width:100%"
                v-model="validation"
                type="number"
                maxlength="6"
                placeholder="请输入验证码"
              >
            </div>
            <div class="validation cell-4">
              <div v-show="send" @click="sendMsg">{{textContent}}</div>
              <div v-show="alreadySend" disabled="true">{{second+"s"}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="register">
        <button @click="maintenanceList">查询</button>
      </div>

     
    </div>

     <div class="keyboard">
        <!-- 省键盘 -->
        <!-- hidden="hiddenPro" -->
        <div class="provinces" v-show="hiddenPro">
          <div
            class="pro-li fl"
            v-for="(item,index) in provinceArr"
            :key="index"
            @click="proTap(item)"
          >{{item}}</div>
        </div>
        <!-- 号码键盘	 -->
        <div class="keyNums" v-show="hiddenStr">
          <!-- <div
            class="pro-li fl" v-for="(itemm,index1) in strArr"
            :key="index1"
            @click="strTap(itemm)"
            wx:if="index1<10"
          >{{itemm}}</div> -->

          <!-- 第一排为数字 0~9-->
          <div class=" flex-box flex-wrap ">
            <div class="pro_li lf"  v-for="(item,index) in strArr" :key='index'     @click="strTap(item)" > {{item}}</div>
          </div>
           <div class=" flex-box flex-wrap ">
            <div class="pro_li lf"  v-for="(item,index) in strArr1" :key='index'     @click="strTap(item)" > {{item}}</div>
          </div>
           <div class="flex-box flex-wrap justify-content-center">
            <div class="pro_li lf"  v-for="(item,index) in strArr2" :key='index'     @click="strTap(item)" > {{item}}</div>
          </div>
           <div class=" flex-box flex-wrap justify-content-center">
            <div class="pro_li lf"  v-for="(item,index) in strArr3" :key='index'     @click="strTap(item)" > {{item}}</div>
          </div>



          <div class="bot flex-box justify-content-border">
             <!-- <div class="flex-box flex-wrap "> -->
                  <div class="kb-icon kb-hide fl pro-li" @click="backSpace">删除</div>
                  <div class="kb-icon kb-hide fl pro-li" @click="backKeyboard">确定</div>
             <!-- </div> -->
           
          </div>
        </div>
      </div>


  </div>
</template>

<script>
import post from "../tool/otherTool";
import { Base64 } from 'js-base64';
import utils from "../tool/utils"
import config from "../tool/config";

export default {
  data: {
    send: true,
    alreadySend: false,
    second: 61,
    textContent: "发送验证码",
    phoneNum: "", //手机
    licensePlate: "", //车牌
    validation: "", //验证码；

    // 键盘
    provinceArr: [
      "粤",
      "京",
      "津",
      "渝",
      "沪",
      "冀",
      "晋",
      "辽",
      "吉",
      "黑",
      "苏",
      "浙",
      "皖",
      "闽",
      "赣",
      "鲁",
      "豫",
      "鄂",
      "湘",
      "琼",
      "川",
      "贵",
      "云",
      "陕",
      "甘",
      "青",
      "蒙",
      "桂",
      "宁",
      "新",
      "藏",
      "使",
      "领",
      "警",
      "学",
      "港",
      "澳"
    ],
    strArr: [
      "0",
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
    ],
    strArr1: [
      "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"
    ],
    strArr2: [
       "A", "S", "D", "F", "G", "H", "J", "K", "L",

    ],
    strArr3: [
       "Z", "X", "C", "V", "B", "N", "M"
    ],
    hiddenPro: false, // 省份键盘
    hiddenStr: false, // 数字字母键盘
    carnum: ""
  },
  async created() {
    wx.setNavigationBarColor({
      frontColor: "#ffffff", // 必写项
      backgroundColor: "#ffffff", // 必写项  对应如上配置
      animation: {
        // 可选项
        duration: 400,
        timingFunc: "easeIn"
      }
    });
  },

  onShow: function() {},

  mounted() {
    //  this.getOpenid();
  },
  watch: {},

  methods: {
    //输入框监听
    inputStartEdit() {
      this.closeKeybord();
    },


    //编辑键盘
    licensePlateClick() {
      console.log("键盘===");
      this.licensePlate = "";
      this.hiddenPro = true;
      this.hiddenStr=false;
    },
    //注册
    maintenanceList() {
      var that=this;
      let PlateNumMatch = this.licensePlateValidation(this.licensePlate); //车牌  验证码。
      console.log("3===", PlateNumMatch);
      if (PlateNumMatch) {
        let validValue = this.validations(this.validation); //验证  验证码 是否一致。
        if (validValue) {
          let checkedNum = this.checkPhoneNum(this.phoneNum);

          if (checkedNum) {

            post("EWSCenter/webservice/getRoInfo/verifyRoInfo", {
            // post("EWSCenter/webservice/registerUser", {
              phoneNo: utils.encrypt(that.phoneNum,"a9c344654cc14d83"), 
              license: utils.encrypt(that.licensePlate,"a9c344654cc14d83"), 
              messageNo:that.validation,
              // openid: ""
            },"work").then(res => {
              console.log("回调==");
              console.log(res);
              console.log("res.data.returnCode== ",res.data.returnCode );
              if (res.data.returnCode == 1) {
                var value={phone:utils.encrypt(that.phoneNum,"a9c344654cc14d83"),
                          licensePlate:utils.encrypt(that.licensePlate,"a9c344654cc14d83")
                };
                wx.setStorageSync("licenseInfo", value); //存储openid
                wx.reLaunch({
                  url: "../home/main",
                });
              }else{

                  wx.showToast({
                  title: res.data.returnMessage,
                  icon: "none",
                  duration: 2000
                 });
              }
            });
          
          }
        } else {
          wx.showToast({
            title: "验证码输入有误",
            icon: "none",
            duration: 2000
          });
        }
      } else {
        wx.showToast({
          title: "车牌号输入有误",
          icon: "none",
          duration: 2000
        });
      }
    },

    //车牌号验证
    licensePlateValidation(value) {
      console.log(value);
      value = value.replace(/\s/g, "");
      let str = this.toUpperCase(value);
      return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$$/.test(
        str
      );
    },

  backClick() {
      wx.navigateBack({
        delta: 1
      });
      // wx.switchTab({
      //   url:"../im/main"
      //  })
    },
    toUpperCase(str) {
      //小写字母转大写
      str = str.toUpperCase();
      console.log("小写字母转大写", str);
      this.licensePlate = str;
      return str;
    },

    //验证码验证
    validations(validation) {
      console.log("输入的入的验证码", validation);
      if (validation != "" && validation.length > 3) {
        return true;
      } else {
        return false;
      }
    },
    //手机号验证
    checkPhoneNum(phone) {
      if (phone == "") {
        // warn = "号码不能为空";
        wx.showToast({
          title: "手机号不能为空",
          icon: "none",
          duration: 2000
        });
        return false;
      } else if (
        phone.trim().length != 11 ||
        !/^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/.test(phone)
      ) {
        // warn = "手机号格式不正确";
        wx.showToast({
          title: "手机号格式不正确",
          icon: "none",
          duration: 2000
        });
        return false;
      } else {
        //当手机号正确的时候提示用户短信验证码已经发送
        return true;
      }
    },

    sendMsg() {
      // let value=  post("",{});

      // console.log(value);
      let checkedNum = this.checkPhoneNum(this.phoneNum);
      if (checkedNum) {
        //网络请求 =========================加载
        post("EWSCenter/webservice/sendMessage", {
          phoneNo: this.phoneNum
        },"work").then(res => {
          console.log("回调");
          console.log(res);
        });
        this.alreadySend = true;
        this.send = false;
        this.timer();
        this.textContent = "重新发送";
      }
    },
    proTap(e) {
      //点击省份
      this.licensePlate = this.licensePlate + e;
      this.hiddenPro = false;
      this.hiddenStr = true;

    },
    strTap(e) {
      //点击字母数字

      // let province = e.currentTarget.dataset.str;
      // let carnum = this.data.carnum;
      console.log("this.licensePlate==",this.licensePlate);
      console.log("length==",this.licensePlate.length);
      if (this.licensePlate.length >= 8) return; // 车牌长度最多为8个（新能源车牌8个）
      this.licensePlate = this.licensePlate + e;
    },
    backSpace() {
      //退格

      var arr = this.licensePlate.split("");
      arr.splice(-1, 1);
      console.log(arr);
      var str = arr.join("");
      if (str == "") {
        (this.hiddenPro = true), (this.hiddenStr = false);
      }
      this.licensePlate = str;
    },
    backKeyboard() {
      //返回省份键盘
      // this.hiddenPro=true;
      // this.hiddenStr=false;
      this.hiddenPro = false;
      this.hiddenStr = false;
    },

    closeKeybord() {
      this.hiddenPro = false;
      this.hiddenStr = false;
    },

    timer() {
      let promise = new Promise((resolve, reject) => {
        let setTimer = setInterval(() => {
          this.second = this.second - 1;

          if (this.second <= 0) {
            (this.second = 60), (this.alreadySend = false), (this.send = true);
            resolve(setTimer);
          }
        }, 1000);
      });
      promise.then(setTimer => {
        clearInterval(setTimer);
      });
    }
  }
};
</script>
     
<style  lang='scss'>
// .page{
//     background-color: #999999;
// }
/* flex */
.flex-box{display: flex;}
.flex-wrap{flex-wrap:wrap;}
.justify-content-center{justify-content:center;}
.justify-content-border{justify-content:space-between; -webkit-justify-content: space-between;}
.justify-content-around{justify-content:space-around;}
.justify-content-end{justify-content:flex-end;}
.align-items-center{align-items:center;}
.align-items-end{align-items:flex-end;}
.align-content-center{align-content:center}
.flex-1{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-2{-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-3{-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-4{-webkit-box-flex:4;-moz-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4;}
.flex-5{-webkit-box-flex:5;-moz-box-flex:5};
* {
  margin: 0;
  padding: 0;
}
.pageBG {
  width: 100%;
  height: 100vh;
}
.bg {
  position: absolute;

  top: 42%;
  left: 20px;
  right: 20px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
  height: 207px;

  input {
    height: 49px;
    font-size: 15px;
    float: left;
    width: 80%;
  }
}
.phoneBg {
  margin: 15px;
  height: 49px;
  /* background-color: rgba(245, 248, 250, 1); */
  img {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 15px;
    float: left;
  }
}

.line {
  width: 100%;
  height: 3rpx;
  background-color: #dedede;
  // padding-left: 20px;
}

.phone {
  height: 50px;
}
.validation {
  text-align: center;
  div {
    line-height: 49px;
    font-size: 12px;
    color: rgba(74, 126, 246, 1);
  }
}

.hideBg {
  left: 0px;
  top: 0px;
  height: 52%;
  background-color: rgba(251, 251, 251, 1);
  img {
    width: 100%;
    height: 100%;
  }
}
.register {
  position: relative;
  top: 50px;
  button {
    margin: 20px;
    height: 49px;
    font-size: 18px;
    color: white;
    background-color: #0091ff;
    text-align: center;
  }
}

/* 键盘 */
.fl {
  float: left;
}
.carnum {
  text-align: center;
  height: 88rpx;
}
.tel {
  border-bottom: 2rpx solid #ddd;
  height: 100rpx;
  line-height: 100rpx;
}
.chepai {
  height: 200rpx;
  line-height: 200rpx;
}
.provinces {
  overflow: hidden;
  padding: 30rpx;
  /* position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10000; */
}
.pro-li {
  font-size: 38rpx;
  color: #353535;
  height: 76rpx;
  width: 75rpx;
  line-height: 76rpx;
  text-align: center;
  margin-left: 12rpx;
  margin-bottom: 20rpx;
  background-color: #eee;
  box-shadow: 0 1rpx 2rpx 0 #ccd2e3;
  border-radius: 5rpx;
}
/* .provinces .pro-li:nth-child(11),
.provinces .pro-li:nth-child(20),
.provinces .pro-li:nth-child(29){
  margin-left: 48rpx
}
.keyNums .pro-li:nth-child(11),
.keyNums .pro-li:nth-child(20){
  margin-left: 48rpx
} */
.pro-close {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border: 2rpx solid #ddd;
  margin: 5rpx;
}
.pro-del {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border: 2rpx solid #ddd;
  margin: 5rpx;
}
.keyNums {
  overflow: hidden;
  padding: 30rpx;
  /* position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10000; */
}
.pro-ok {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border: 2rpx solid #ddd;
  margin: 5rpx;
  /* margin-left: 35%; */
}
.pro-d {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border: 2rpx solid #ddd;
  margin: 5rpx;
}
.keyNums .bot .kb-del {
  margin-left: 12rpx;
}
.keyNums .bot .kb-icon {
  width: 104rpx;
  height: 76rpx;
  background: #eee;
}


.pro_li{
 font-size: 38rpx;
 height: 88rpx;
 width: 8.5%;
 line-height: 88rpx;
 text-align: center;
 /* border: 2rpx solid #ddd; */
 margin: 10rpx 0.75%;
 background-color:#eee; 
  border-radius: 12rpx;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.35);
  color: #353535;
}

.pro_del,.pro_close,.pro_ok{
  position: relative;
 width: 18.5%;
 height: 70rpx;
 line-height: 70rpx;
 font-size: 32rpx;
 text-align: center;
 background-color: #ACB3BC;
 margin: 10rpx 0.75%;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.35)
}
.pro_del.active,
.pro_close.active{
  background-color: rgba(0, 0, 0, 0.35)
}

.keyboard {
  // background-color: white;
  // position: relative;
  // top: -230rpx;
  // z-index: 999;
  // width: 375px;
  // left: -40rpx;



  background-color:white;
position:absolute;
// top:-230rpx;
z-index:999;
width:750rpx;
// left:-40rpx;
bottom:0rpx
}
.license {
  height: 100rpx;
  position: relative;
  z-index: 999;
}

.navgation {
  width: 100%;
  height: 68px;
  text-align: center;
  color: white;
  line-height: 68px;
  background: transparent;
  position: fixed;
  z-index: 99999;
   top: 0;


  .backDiv {
    width: 120rpx;
    height: 88rpx;
    display: inline;
    position: absolute;
    left: 0rpx;
    top: 40rpx;
    line-height: 88rpx;

    img {
      width: 22rpx;
      height: 36rpx;
      margin-top: 26rpx;
    }
  }
  .lb {
    top: 40rpx;
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    margin-left: -85rpx;
  }
}
</style>
